<template>
  <page-wrap
    ref="pageWrap"
    hideTab
    back
    :title="dynamicTitle"
    :showTop="dynamicTitle"
    :dark="loaded ? false : true"
    :bg-color="dynamicColor"
    :callBackUrl="gotoMyTabUrl"
    :hideSafeArea="true"
    ><view class="activity-detail" :style="'padding-top:' + navHeight + 'px;'">
      <view class="activity-pic">
        <img :src="itemInfo.topImg" alt="" />
      </view>
      <view class="activity-info">
        <view class="title">{{ itemInfo.title }}</view>
        <view v-if="itemInfo.startTime" class="time">
          <img class="clock" :src="clock" alt="" />
          {{ itemInfo.startTime.replace(/-/g, ".") }}
          <span v-if="itemInfo.endTime"
            >至 {{ itemInfo.endTime.replace(/-/g, ".") }}</span
          >
        </view>
        <view
          :class="
            itemInfo.activityStatus == 20
              ? 'status-green'
              : itemInfo.activityStatus == 10
              ? 'status-orange'
              : 'status-gray'
          "
        >
          <img
            :src="
              itemInfo.activityStatus == 20
                ? wks
                : itemInfo.activityStatus == 10
                ? zzjx
                : yjs
            "
            alt=""
          />
          {{
            itemInfo.activityStatus == 20
              ? "未开始"
              : itemInfo.activityStatus == 10
              ? "进行中"
              : "已结束"
          }}
        </view>
      </view>
      <view class="activity-position">
        <img class="mapImg" :src="mapBlack" alt="" />
        <view class="position">{{ itemInfo.position }}</view>
      </view>
      <view class="activity-tab">
        <view
          :class="
            currentTab.label == item.label
              ? 'tab-list-item-active'
              : 'tab-list-item'
          "
          @click="changeCurrentTab(item)"
          v-for="(item, index) in activityTabList"
          :key="index"
          >{{ item.label }}
          <view v-if="currentTab.label == item.label" class="red-bottom"></view>
        </view>
      </view>
      <view class="activity-introducion" v-if="currentTab.label == '活动介绍'">
        <view class="introduction" v-if="itemInfo.contentImg != ''">
          <img :src="itemInfo.contentImg" alt="" />
        </view>
        <view
          class="introduction"
          v-else-if="JSON.stringify(itemInfo.content) != '{}'"
        >
          <view class="activity-title">
            <view class="circle"></view>
            <view class="title">活动目标</view>
          </view>
          <view class="activity-content">{{ itemInfo.content.target }}</view>
          <view class="activity-title">
            <view class="circle"></view>
            <view class="title">活动内容</view>
          </view>
          <view
            class="activity-content"
            v-html="itemInfo.content.content"
          ></view>
        </view>
        <view class="introduction" v-else>
          <Empty
            :baseImg="emptyImg"
            text="暂无数据"
            :fontWeight="400"
            textColor="#bfbfbf"
            class="empty"
            spacing="0"
          />
        </view>
      </view>
      <view class="container" v-if="currentTab.label == '我的活动图片'">
        <view class="result-img-container">
          <view
            v-for="(item, index) in resultImgList"
            :key="index"
            @click="previewImage(item, index)"
            class="result-image"
          >
            <img :src="resultImgList[index]" />
            <!-- 添加选中状态的圆圈 -->
            <view
              v-if="isEditMode"
              :class="
                resultIndexList[index].isSelected
                  ? 'check-circle-selected'
                  : 'check-circle'
              "
            >
              <view class="check-mark"
                ><u-icon
                  v-if="resultIndexList[index].isSelected"
                  name="checkbox-mark"
                  color="#ffffff"
                  size="28"
                ></u-icon
              ></view>
            </view>
          </view>
        </view>
        <u-upload
          ref="uploader"
          v-if="resultImgList.length < 9"
          :action="uploadAction"
          :fileList="fileList"
          @on-remove="deletePic($event, item)"
          @on-success="handleUploadSuccess($event, item)"
          name="1"
          multiple
          :maxCount="maxCount"
          uploadText="上传照片"
          :previewFullImage="true"
          :deletable="true"
        >
        </u-upload>
      </view>
      <view class="bottom-area">
        <view v-if="!isEditMode" class="upload-btn" @click="upLoadPhotos"
          >上传活动照片</view
        >
        <view
          class="delete-btn"
          @click="deletePhotos"
          v-if="resultImgList.length > 0 && !isEditMode"
          >删除活动照片</view
        >
        <view class="delete-box" v-if="isEditMode">
          <view class="cancel" @click="cancel">取消</view>
          <view class="delete" @click="deleteSelectPhotos">删除</view>
        </view>
      </view>
    </view>
  </page-wrap>
</template>

<script>
import share from "@/mixins/share";
import { uploadAction } from "@/api/index";
import Empty from "@/components/Empty.vue";
import { uploadFiles, activityFiles, deleteFiles } from "@/api/modules/zty.js";

export default {
  mixins: [share],
  components: {
    Empty,
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 10) {
      this.dynamicTitle = "活动详情";
      this.dynamicColor = "#cfe8fd";
    } else {
      this.dynamicTitle = "";
    }
  },
  data() {
    return {
      mapBlack: "https://img3.job1001.com/ypMp/elan/images/ztyNew/mapBlack.png",
      isEditMode: false,
      zzjx: "//img3.job1001.com/ypMp/elan/images/ztyNew/zzjx.png",
      wks: "//img3.job1001.com/ypMp/elan/images/ztyNew/wks.png",
      yjs: "//img3.job1001.com/ypMp/elan/images/ztyNew/yjs.png",
      emptyImg: this.$imgBaseSelf + "common/empty.png",
      fileList: [],
      imgList: [], //上传图片
      resultImgList: [
        "http://img106.job1001.com/upload/adminnew/2025-02-20/1740041783-F3IKZYW.jpg",
        "http://img106.job1001.com/upload/adminnew/2025-02-20/1740041783-F3IKZYW.jpg",
      ],
      resultIndexList: [],
      maxCount: 9,
      uploadAction,
      fdj: "//img3.job1001.com/ypMp/elan/images/ztyNew/fdj.png",
      clock: "https://img3.job1001.com/ypMp/elan/images/ztyNew/clock.png",
      navHeight: getApp().globalData.navHeight,
      dynamicColor: "",
      dynamicTitle: "",
      itemInfo: {},
      activityTabList: [
        {
          label: "活动介绍",
          value: 10,
        },
        {
          label: "我的活动图片",
          value: 20,
        },
      ],
      currentTab: {
        label: "活动介绍",
        value: 10,
      },
    };
  },
  methods: {
    async deleteFilesFn() {
      const params = {
        fileIds: "",
      };
      const res = await deleteFiles(params);
      if (res.code == 200) {
        console.log("res", res);
      }
    },
    async activityFilesFn() {
      const params = {
        pageNo: 1,
        pageSize: 9,
        personId: uni.getStorageSync("person-id").slice(2) || undefined,
        activityId: this.itemInfo.activityId,
      };
      const res = await activityFiles(params);
      if (res.code == 200) {
        this.resultImgList = [];
        this.resultIndexList = [];
        res.data.forEach((item, index) => {
          this.resultImgList.push(item.fileUrl);
          this.resultIndexList.push({
            url: item.fileUrl,
            id: item.id,
            isSelected: false,
          });
        });
      }
    },
    async uploadFilesFn() {
      let tempParams = [];
      this.imgList.forEach((item, index) => {
        tempParams.push({
          activityId: this.itemInfo.activityId,
          fileType: "1",
          fileUrl: item,
          personId: uni.getStorageSync("person-id").slice(2) || undefined,
        });
      });
      const params = {
        files: tempParams,
      };
      if (tempParams.length > 0) {
        const res = await uploadFiles(params);
        if (res.code == 200) {
          this.imgList = [];
          this.$refs.uploader.clear();
          this.activityFilesFn();
          this.isEditMode = false;
        }
      } else {
        uni.showToast({
          title: "请选择照片",
          icon: "none",
          duration: 2000,
        });
      }
    },
    // 预览图片
    previewImage(item, index) {
      if (!this.isEditMode) {
        uni.previewImage({
          urls: this.resultImgList, // 图片链接数组
          current: item, // 当前预览的图片
          longPressActions: {
            itemList: ["删除"],
            success: (data) => {
              if (data.tapIndex === 0) {
                console.log("aaaaaa");
                this.deleteImage(item); // 删除图片
              }
            },
            fail: (err) => {
              console.log("长按失败", err);
            },
          },
        });
      } else {
        this.resultIndexList[index].isSelected =
          !this.resultIndexList[index].isSelected;
      }
    }, // 删除图片
    deleteImage(image) {
      uni.showModal({
        title: "删除图片",
        content: "确定要删除这张图片吗？",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            this.resultImgList = this.resultImgList.filter(
              (img) => img !== image
            );
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
          }
        },
      });
    },
    clickImg(item) {
      wx.previewImage({
        urls: this.resultImgList, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: item, // 当前显示图片的http链接，默认是第一个
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
      });
    },
    handleUploadSuccess(data, item) {
      let filePath = "http://img106.job1001.com/" + data;
      console.log("filePath", filePath);
      this.imgList.push(filePath);
    },
    deletePic(data, item) {
      this.imgList.splice(data, 1);
    },
    changeCurrentTab(item) {
      this.currentTab = item;
    },
    upLoadPhotos() {
      if (this.currentTab.label == "活动介绍") {
        this.changeCurrentTab({
          label: "我的活动图片",
          value: 20,
        });
      } else {
        if (this.resultImgList.length == 9) {
          uni.showToast({
            title: "最多上传9张照片",
            icon: "none",
            duration: 2000,
          });
        } else {
          this.uploadFilesFn();
        }
      }
    },
    deletePhotos() {
      if (this.currentTab.label == "活动介绍") {
        this.changeCurrentTab({
          label: "我的活动图片",
          value: 20,
        });
      } else {
        if (this.resultImgList.length > 0) {
          this.isEditMode = true;
        } else {
          uni.showToast({
            title: "暂无活动照片",
            icon: "none",
            duration: 2000,
          });
        }
      }
    },
    cancel() {
      this.isEditMode = false;
      this.resultIndexList.forEach((item, index) => {
        item.isSelected = false;
      });
    },
    async deleteSelectPhotos() {
      let tempFileIdArray = [];
      this.resultIndexList.forEach((item, index) => {
        if (item.isSelected == true) {
          tempFileIdArray.push(item.id);
        }
      });
      tempFileIdArray = tempFileIdArray.join("_");
      const params = {
        fileIds: tempFileIdArray,
      };
      const res = await deleteFiles(params);
      if (res.code == 200) {
        console.log("res");
        this.activityFilesFn();
        this.isEditMode = false;
        this.resultIndexList.forEach((item, index) => {
          item.isSelected = false;
        });
      }
    },
  },
  onLoad(opt) {
    this.itemInfo = JSON.parse(decodeURIComponent(opt.itemInfo));
    this.itemInfo.content = JSON.parse(this.itemInfo.content);
    console.log("this.itemInfo", this.itemInfo);
  },
  mounted() {
    this.maxCount = 9 - this.resultImgList.length;
    this.activityFilesFn();
  },
};
</script>

<style lang="scss" scoped>
$img-base-person: $img-base + "careerPath/";
@font-face {
  font-family: "AlimamaShuHeiTi-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf");
}
.activity-detail {
  background-image: url($img-base + "careerPath/majorDetailBg.png");
  background-size: 100% 832rpx;
  background-repeat: no-repeat;
  height: 100vh;
  .activity-pic {
    height: 444rpx;
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .activity-info {
    width: 100%;
    // height: 214rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 32rpx 32rpx;
    padding: 32rpx 32rpx 28rpx 32rpx;
    .title {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #222222;
      line-height: 36rpx;
    }
    .time {
      margin-top: 28rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-weight: 400;
      font-size: 26rpx;
      color: #555555;
      .clock {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }
    .status {
      width: 160rpx;
      height: 44rpx;
      border-radius: 12rpx;
      right: 14rpx;
      bottom: 18rpx;
      font-size: 22rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      margin-top: 22rpx;
      img {
        width: 22rpx;
        height: 22rpx;
      }
      &-green {
        @extend .status;
        color: #43b77f;
        background-color: #e1faef;
      }

      &-orange {
        @extend .status;
        color: #ff7600;
        background-color: #fff7ee;
      }
      &-gray {
        @extend .status;
        color: #c2c2c2;
        background-color: #f7f7f7;
      }
    }
  }
  .activity-position {
    width: calc(100% - 32rpx);
    margin: 16rpx;
    height: 64rpx;
    background: #ffffff;
    border-radius: 8rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14rpx;
    gap: 12rpx;
    .mapImg {
      width: 32rpx;
      height: 32rpx;
    }
    .position {
      height: 36rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 36rpx;
    }
  }
  .activity-tab {
    height: 90rpx;
    width: 100%;
    background: #ffffff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    padding: 26rpx 32rpx 28rpx 32rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 56rpx;
    .tab-list-item {
      color: #555555;
      font-weight: 400;
      font-size: 28rpx;
      position: relative;
      &-active {
        @extend .tab-list-item;
        color: #222222;
        font-weight: 800;
        font-size: 30rpx;
      }
      .red-bottom {
        position: absolute;
        width: 34rpx;
        height: 10rpx;
        background: linear-gradient(90deg, #f65b3c 0%, #fdfbfc 100%);
        border-radius: 12rpx;
        bottom: 0;
        left: 50%; /* 向右移动 50% 的父元素宽度 */
        transform: translateX(-50%); /* 向左移动自身宽度的 50% */
      }
    }
  }
  .activity-introducion {
    width: 100%;
    height: 1000rpx;
    background: #f9f9f9;
    border-radius: 12rpx;
    .introduction {
      padding: 40rpx 42rpx;
      .activity-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20rpx;
        .circle {
          width: 16rpx;
          height: 16rpx;
          background: #d8d8d8;
          border-radius: 50%;
        }
        .title {
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 30rpx;
          color: #222220;
        }
      }
      .activity-content {
        margin: 24rpx 0 60rpx 0;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #555555;
      }
    }
  }
  .container {
    padding: 40rpx 20rpx;
    padding-bottom: 220rpx;
    background-color: #ffffff;

    .result-img-container {
      display: flex;
      flex-wrap: wrap; /* 允许换行 */
      gap: 10px; /* 子项目之间的间距 */
      margin-top: 28rpx;
      .result-image {
        // width: 220rpx;
        height: 220rpx;
        border-radius: 8rpx;
        // margin-right: 10rpx;
        width: calc(33.33% - 10px); /* 每行三个项目，减去间距 */
        padding: 10px;
        text-align: center;
        box-sizing: border-box; /* 确保宽度包括内边距 */
        position: relative; /* 父容器设置相对定位 */
        img {
          width: 100%;
          height: 100%;
        }
      }

      /* 选中状态的圆圈 */
      .check-circle {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: transparent; /* 背景透明 */
        border: 4rpx solid #ffffff; /* 添加黑色边框 */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1; /* 默认隐藏 */
        transition: opacity 0.3s; /* 动画效果 */
      }
      .check-circle-selected {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #43b77f; /* 背景透明 */
        border: none; /* 添加黑色边框 */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1; /* 默认隐藏 */
        transition: opacity 0.3s; /* 动画效果 */
      }

      /* 选中状态的样式 */
      .check-circle.selected {
        opacity: 1; /* 显示 */
      }

      /* 对钩样式 */
      .check-mark {
        width: 16px;
        height: 16px;
        // border: 2px solid white;
        // border-top: none;
        // border-left: none;
        // transform: rotate(45deg);
      }
    }
  }
  .bottom-area {
    width: 100%;
    // height: 200rpx;
    background: #ffffff;
    padding-top: 44rpx;
    position: fixed;
    bottom: 60rpx;
    display: flex;
    flex-direction: row;
    padding: 0 20rpx;
    gap: 20rpx;
    .upload-btn {
      width: calc(100% - 64rpx);
      margin: 0 auto;
      height: 80rpx;
      background: #f75a3e;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 30rpx;
      color: #ffffff;
      margin-bottom: 20rpx;
    }
    .delete-btn {
      width: calc(100% - 64rpx);
      margin: 0 auto;
      height: 80rpx;
      background: #e3e3e3;
      color: 888888;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 30rpx;
      margin-bottom: 20rpx;
    }
    .delete-box {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 20rpx;
      padding: 0 20rpx;
      .cancel,
      .delete {
        width: calc(50% - 10rpx);
        margin: 0 auto;
        height: 80rpx;

        border-radius: 8rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 30rpx;
      }
      .cancel {
        background: #e3e3e3;
        color: 888888;
      }
      .delete {
        background: #f75a3e;
        color: #ffffff;
      }
    }
  }
}
</style>
